<template>
    <div class="count-sales">
        <div class="card">
            <div class="card__header">
                <span class="label">总用户数</span>
                <span class="value">{{count.totalUsers}}</span>
            </div>

            <div class="card__container">
                <ul class="count-sales__cop">
                    <li>
                        <span>周同比</span>

                        <div class="fall">
                            <template v-if="count.total_users_week<0">
                                <el-icon>
                                    <bottom-right />
                                </el-icon>
                            </template>
                            <template v-if="count.total_users_week>0">
                                <el-icon>
                                    <top-right />
                                </el-icon>
                            </template>
                            <span>{{count.total_users_week}}%</span>
                        </div>
                    </li>

                    <li>
                        <span>月同比</span>

                        <div class="rise">
                            <template v-if="count.total_users_month<0">
                                <el-icon>
                                    <bottom-right />
                                </el-icon>
                            </template>
                            <template v-if="count.total_users_month>0">
                                <el-icon>
                                    <top-right />
                                </el-icon>
                            </template>
                            <span>{{count.total_users_month}}%</span>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="card__footer">
                <span class="label">昨日增用户数</span>
                <span class="value">{{count.registered_users}}</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useCool } from '/@/cool';
import { BottomRight, TopRight } from '@element-plus/icons-vue';
const { service, router } = useCool();

const count = ref({
	totalUsers: 0,
	total_users_week: 0,
	total_users_month: 0,
	registered_users: 0
});

onMounted(() => {
	service.user.analysis.getTotalUsers({}).then(res => {
		count.value = res;
	});
});
</script>

<style lang="scss" scoped>
.count-sales {
	&__cop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;

		li {
			display: flex;
			list-style: none;
			flex: 1;
			color: var(--el-color-info);

			.fall,
			.rise {
				display: flex;
				align-items: center;
				margin-left: 10px;
			}

			.fall {
				color: #13ae7c;
			}

			.rise {
				color: #f21e37;
			}
		}
	}
}
</style>
